<template>
    <div class="navigation-cards">
        <div class="cards-container">
            <van-cell-group :border="false">
                <van-cell @click="navigateTo('basic-info')" class="nav-card">
                    <template #title>
                        <div class="card-content">
                            <div class="card-icon basic-info-icon">
                                <van-icon name="manager" size="35" />
                            </div>
                            <div class="card-text-container">
                                <div class="card-title">查看企业信息</div>
                                <div class="card-desc">企业信息详情查看页面，展示企业基础信息和录入成员信息列表</div>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <div class="cards-container">
            <van-cell-group :border="false">
                <van-cell @click="navigateTo('detail-chart')" class="nav-card">
                    <template #title>
                        <div class="card-content">
                            <div class="card-icon org-chart-icon">
                                <van-icon name="cluster" size="35" />
                            </div>
                            <div class="card-text-container">
                                <div class="card-title">查看组织架构</div>
                                <div class="card-desc">录入部门架构信息信息，生成一个可编辑的表单</div>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>

        <!-- 查看上传信息 -->
        <div class="cards-container">
            <van-cell-group :border="false">
                <van-cell @click="navigateTo('detailUpload')" class="nav-card">
                    <template #title>
                        <div class="card-content">
                            <div class="card-icon company-info-icon">
                                <van-icon name="description" size="35" />
                            </div>
                            <div class="card-text-container">
                                <div class="card-title">查看上传文件</div>
                                <div class="card-desc">查看上传文件信息</div>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
    </div>
</template>

<script setup lang="ts">

import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
// 获取传递的 id 参数
const companyId = route.query.id
const navigateTo = (path: string) => {
    switch (path) {
        case 'basic-info':
            // 跳转到基础信息页面
            router.push({
                path: '/detailBasic',
                query: { id: companyId }
            })
            break
        case 'detail-chart':
            // 跳转到组织架构页面
            router.push(
                {
                    path: '/detailChart',
                    query: { id: companyId }
                }
            )
            break

        case 'detailUpload':
            // 跳转到企业信息页面
            router.push({ path: '/detailUpload', query: { id: companyId } })
            break
        default:
            break
    }
}

</script>

<style scoped>
.navigation-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 50vh;
    width: 90vw;
}

.cards-container {
    width: 100%;
    margin-top: 2vh;
    background: white;
    border-radius: 75px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-card {
    margin: 0;
}

.nav-card:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.card-content {
    display: flex;
    align-items: center;
    padding: 15px 0;
}

.card-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.basic-info-icon {
    background-color: #e1f5fe;
    color: #039be5;
}

.org-chart-icon {
    background-color: #e8f5e9;
    color: #4caf50;
}

.member-info-icon {
    background-color: #fff3e0;
    color: #ff9800;
}

/* 在现有样式基础上添加 */
.company-info-icon {
    background-color: #fce4ec;
    color: #e91e63;
}

.card-text-container {
    flex: 1;
}

.card-title {
    font-size: 20px;
    color: #333;
    font-weight: 500;
    margin-bottom: 8px;
}

.card-desc {
    font-size: 16px;
    color: #999;
}

:deep(.van-cell) {
    padding: 0 20px;
}

:deep(.van-cell__title) {
    flex: 1;
}

:deep(.van-cell__value) {
    color: #999;
    font-size: 12px;
}

:deep(.van-cell:after) {
    display: none;
}
</style>